import React, { Component } from 'react';
import {
  Image,
  View,
  StyleSheet,
  Text,Button,AppRegistry,ScrollView
} from 'react-native';
import { TabNavigator,StackNavigator } from 'react-navigation';
import pxToDp from '../common/comm';
import Index from './Index';
import Home from './BannerImg';
import Fanxian from './Fanxian';
import Mypage from './Mypage';
import Notice from './Notice';
import Product from './Product';
import Banner from './Banner';
import Zizhi from './Zizhi';
import My from './Mypage';
import * as DATA from '../data/data';

//TabBar
var url1 = DATA.app_pic + 'home.png';
var url2 = DATA.app_pic + 'fanxian.png';
var url3 = DATA.app_pic + 'my.png';
class MyFanli extends React.Component {
  render() {
    return (
      <Fanxian />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: pxToDp(43),
    height: pxToDp(62),
  }
});

export default  MyApp = TabNavigator({
  Home: {
    screen: Index,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
      <Image
        source = {{uri:url1}}
        style={[styles.icon,{tintColor: tintColor}]}
      />
     )
    }
  },
  MyFanli: {
    screen: MyFanli,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
      <Image
        source = {{uri:url2}}
        style={[styles.icon,{tintColor: tintColor}]}
      />
     )
    }
  },
  My: {
    screen: My,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
      <Image
        source = {{uri:url3}}
        style={[styles.icon,{tintColor: tintColor}]}
      />
     )
    }
  }
}, {
    tabBarPosition: 'bottom',
    tabBarOptions: {
      showIcon: true,
      showLabel: false,
      lazy:true,
      inactiveTintColor :'#606060',
      activeTintColor :DATA.BASE_COLOR,
      indicatorStyle: {
        height: 0 
      },
      iconStyle: {
        width: pxToDp(43),
        height: pxToDp(62),
      },
      style: {
        backgroundColor: '#fff',
        height: pxToDp(100),
        borderTopWidth: pxToDp(1),
        borderTopColor:'#ddd'
      }
    }
  });


